<template>
  <el-aside class="left-nav">
    <el-row class="tac">
      <el-col :span="12">
        <h5 class="mb-2">City巡查系统</h5>
        <div class="head-pic">
          <span class="pic"> </span>
          <p>{{ num }}</p>
        </div>
        <el-menu
          active-text-color="#fff"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#D1D9E6"
          @open="handleOpen"
          @close="handleClose"
          router="true"
        >
          <el-menu-item index="1" route="/home/index">
            <el-icon
              ><img src="../../../asset/images/矢量智能对象(18).png" alt=""
            /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon
                ><img src="../../../asset/images/矢量智能对象(17).png" alt=""
              /></el-icon>
              <span>工作状态</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" route="/home/working/new"
                >最新状态</el-menu-item
              >
              <el-menu-item index="2-2" route="/home/working/hot"
                >热门状态</el-menu-item
              >
              <el-menu-item index="2-3" route="/home/working/history"
                >历史状态</el-menu-item
              >
              <el-menu-item index="2-4" route="/home/working/list"
                >综合报表</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="3" route="/home/daily">
            <el-icon
              ><img src="../../../asset/images/矢量智能对象(16).png" alt=""
            /></el-icon>
            <span>执法日报</span>
          </el-menu-item>
          <el-sub-menu index="4">
            <template #title>
              <el-icon
                ><img src="../../../asset/images/矢量智能对象(15).png" alt=""
              /></el-icon>
              <span>专项行动</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" route="/home/report"
                >行动数据上报</el-menu-item
              >
              <el-menu-item index="3-2" route="/home/statistics"
                >数据统计与监控</el-menu-item
              >
              <el-menu-item index="3-3" route="/home/action"
                >历史专项行动查看</el-menu-item
              >
              <el-menu-item index="3-4" route="/home/upload"
                >后台数据上传</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon
                ><img src="../../../asset/images/矢量智能对象(14).png" alt=""
              /></el-icon>
              <span>执法巡查</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" route="/home/divisional"
                >巡段管理</el-menu-item
              >
              <el-menu-item index="1-2" route="/home/area"
                >责任辖区管理</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>

          <el-menu-item index="6" route="/home/dynamic">
            <el-icon
              ><img src="../../../asset/images/矢量智能对象(13).png" alt=""
            /></el-icon>
            <span>动态巡查</span>
          </el-menu-item>
          <el-menu-item index="7" route="/home/automatic">
            <el-icon
              ><img src="../../../asset/images/矢量智能对象(12).png" alt=""
            /></el-icon>
            <span>自动巡查</span>
          </el-menu-item>
          <el-menu-item index="8" route="/home/attendance">
            <el-icon
              ><img src="../../../asset/images/矢量智能对象(11).png" alt=""
            /></el-icon>
            <span>排班与出勤</span>
          </el-menu-item>
          <el-sub-menu index="9">
            <template #title>
              <el-icon
                ><img src="../../../asset/images/矢量智能对象(10).png" alt=""
              /></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" route="/home/timeoff"
                >请假调休</el-menu-item
              >
              <el-menu-item index="4-2" route="/home/set"
                >设置中心</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref , onMounted} from "vue";
const handleOpen = (key: string, keyPath: string[]) => {};
const handleClose = (key: string, keyPath: string[]) => {};
let num =ref<any>('');
const getNum = ()=>{ 
  // num.value = JSON.parse(sessionStorage.getItem('setItem') || '').num;
  num.value = sessionStorage.getItem('num')
}
onMounted(()=>{
  getNum();
})
</script>
<style lang="less" scoped>
:root {
  --el-menu-bg-color: none;
}
.left-nav {
  width: 200px;
  // position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible;
  .el-col-12 {
    flex: 1;
    max-width: 100%;
    .mb-2 {
      // height: 20%;
      width: 200px;
      line-height: 80px;
      text-align: center;
      font-family: "AdobeHeitiStd-Regular";
      font-size: 24px;
      // margin-bottom: 18px;
      color: #fff;
    }
    .head-pic {
      padding-bottom: 27px;
      width: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      font-size: 14px;
      font-family: "Adobe Heiti Std";
      font-weight: 600;
      color: #ffffff;
      .pic {
        display: block;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        margin-bottom: 5px;
        background: url(../../../asset/images/touxiang123.jpg) no-repeat center;
      }
    }
    .el-menu {
      background-color: transparent;
      border: none;
      height: 80%;

      .el-menu-item.is-active {
        background-color: #97bbe5;
        width: 115%;
      }
      .el-menu-item:hover {
        background-color: #97bbe5;
        width: 115%;
        color: #fff;
      }
      .el-menu-item {
        height: 45px;
        font-family: "HiraginoSansGB-W3";
        font-size: 3%;
        .el-icon {
          margin: 0 5%;
        }
      }
      .el-sub-menu {
        :deep(.el-sub-menu__title) {
          height: 45px;
          font-size: 3%;
          .el-icon {
            margin: 0 5%;
          }
          .el-sub-menu__icon-arrow {
            right: 5%;
          }
        }
        .el-menu-item {
          height: 45px;
          padding-left: 25%;
          width: 100%;
        }
        :deep(.el-sub-menu__title:hover) {
          background-color: #97bbe5;
          width: 115%;
        }
        :deep(.el-menu) {
          background-color: transparent;
          font-family: "HiraginoSansGB-W3";
        }

        :deep(.el-menu-item:hover) {
          background-color: rgba(209, 217, 230, 0.3);
          width: 115%;
          color: #fff;
        }
        .el-menu-item.is-active {
          background-color: rgba(209, 217, 230, 0.3);
        }
        :deep(.el-menu-item-group__title) {
          padding: 0;
        }
      }
    }
  }
}
</style>
